<script type="text/javascript" language="javascript" src="<?= base_url() ?>public/js/jquery.validate.js"></script>
<script src="<?php echo base_url(); ?>public/js/chosen.jquery.min.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>public/js/jquery/jquery.filestyle.js" type="text/javascript"></script
<script>
    $(document).ready(function(){
		
        $("#sministry").chosen(); 
        $("#sprovince").chosen(); 
        $("#sdistrict").chosen(); 
        $("#scommune").chosen(); 
        $("#svillage").chosen(); 
        $("#sstatus").chosen(); 
        $("#ministry").chosen(); 
        $("#province").chosen(); 
        $("#district").chosen(); 
        $("#commune").chosen(); 
        $("#village").chosen(); 
        $("#status").chosen(); 
        $("#medaltype").chosen(); 
        $("#medalclass").chosen(); 
        $("#officialname").chosen(); 
        $("#medal").chosen();
        $('#officialfile').filestyle({width: 350});
		
		
        //event handler for show more search form element
        $('#show-more').click(function (e){
            e.preventDefault();
            $('#search-detail').slideToggle("slow");
        });
		
        //Change to background color of each table row when selecting row
        //And add event handler to retrieve related data
        $(".bedatable tbody tr").click( function( e ) {
            oTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
            //do sth else
            if ($.isFunction(window.ajaxGetRelatedData)) {
                //execute it
                ajaxGetRelatedData($(this));
            }
        });
		
        var oTable = $('.sbedatable').dataTable( {
            "bSortClasses": false,
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": false,
            "bSort": true,
            "bInfo": false,
            "bAutoWidth": true,
            "aoColumnDefs": [ 
                { "bSortable": false, "aTargets": [ 0, 4, 5 ] }
            ],
            "oLanguage": {
                "sLengthMenu": "បង្ហាញ _MENU_ ជួរ",
                "oPaginate": {
                    "sNext": "បន្ទាប់", 
                    "sPrevious": "មុន"
                }
            },
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "<?php echo base_url(); ?>index.php/official_order/search?" + $('#search-official-form').serialize()
        } );
			
        //add event handler for search form elements
        $('#sofficialno, #sfromdate, #stodate', '#svillage', '#sministry', '#sstatus').change(function(){ oTable.fnReloadAjax(); });
		
        //------------------------------------------
		
        //add event handler for add form officeial order
        $('#official-function-submit').click(function (e){
            e.preventDefault();
            //validate each form required field.
            if ($('#official-function-form').validate().form()){
                alert("")
                //submit new data through ajax
                var url = '<?php echo base_url(); ?>index.php/other/add_official_function';
                var data = $('#official-function-form').serialize();
				
                $.post(
                url, 
                data, 
                function(data){
                    if (!data.result){
                        //official order added failed
                        $('#err-msg').html(data.message);
                    }else{
                        //official added succed
                        oTable.fnReloadAjax();	
                        $('#err-msg').html(data.message).delay(3000).html('');
                    }
                },
                { 
                    processData: false, // tell jQuery not to process the data
                    contentType: false	// tell jQuery not to set contentType
                }
            );	
            }
        });
        //---------------------------------------------
    });	
	
    function ajaxGetRelatedData(eTarget){
        alert('Work...!');
        //get the related data through ajax
        //Data of required number of medal
		
        //Data of official to recieve the medal
		
    }
	
</script>

<div id="left-content">
    <div id="official-panel" class="content-block">
        <div class="block-header">ឋានៈ</div>
        <div id="block-content">
            <div id="official-list">
                <table id="data-table" class="no-vertical-border bedatable">
                    <thead>
                        <tr>
                            <th class="index-col">ល.រ</th>
                            <th >ឋានៈ</th>
                            <th >កាលបរិច្ឆេទ</th>
                            <th align="center" class="blank-header" ></th>
                            <th align="center" class="blank-header" ></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr >
                            <td>1</td>
                            <td>fនស/រកត/០៤១២/២៩៨</td>
                            <td>105/07/2012</td>
                        </tr>
                        <tr >
                            <td>1</td>
                            <td>នស/រកត/០៤១២/២៩៨</td>
                            <td>05/07/2012</td>
                        </tr>
                    </tbody> 
                </table>
            </div>
            <!--</div>-->
            <div class="break"></div>
            <div id="form-add-panel">
                <div id="title">បញ្ចូលឋានៈ៖</div>
                <div id="err-msg"></div>
                <form id="official-function-form" method="post" name="official-function-form" enctype="multipart/form-data">
                    <input type="text" name="officialfunctionno" id="officialfunctionno" value="ឋានៈ​" class="text input required left populated-text" />
                    <input type="text" name="officialfunctiondate" id="officialfunctiondate" class="input text datepicker left populated-text" value="កាលបរិច្ឆេទ​" />
                    <input type="submit" id="official-function-submit" name="official-function-submit" value="" class="add-button right" />
                    <div class="clear"></div>
                </form>
            </div>
        </div>
    </div>
    <div id="official-medal-amount" class="content-block">
        <div class="block-header">មន្ត្រី</div>
        <div id="block-content">

        </div>
    </div>
    <div id="official-receipt" class="content-block">
        <div class="block-header">ប្រភេទមេដាយ</div>
        <div id="block-content">
        </div>
    </div>
    <div id="official-receipt" class="content-block">
        <div class="block-header">ថ្នាក់មេដាយ</div>
        <div id="block-content">
        </div>
    </div>
</div>
<!--<div id="related-activity" class="content-block right">
        <div class="block-header">ប្រតិបត្តិសំខាន់ៗ</div>
    <div id="block-content"></div>
</div>-->